/* 背景 */
@property --glass {
    syntax: '<angle>';
    inherits: false;
    initial-value: 337deg;
}

* {
    transform-style: preserve-3d;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    --cbz: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.content {
    --frame: #070b32;
    --bush: #181b38;
    --dot1: radial-gradient(circle at 50% 50%, var(--bush) 0 0.25vmin, #fff0 calc(0.25vmin + 1px) 100%);
    --dot2: radial-gradient(circle at 50% 50%, var(--bush) 0 0.5vmin, #fff0 calc(0.5vmin + 1px) 100%);
    --dot3: radial-gradient(circle at 50% 50%, var(--bush) 0 1.15vmin, #fff0 calc(1.15vmin + 1px) 100%);
    --glass: 337deg;
    --luz1: hsl(var(--glass) 60% 50% / 60%);
    --luz2: hsl(var(--glass) 54% 32%);
    --luz3: hsl(var(--glass) 54% 25%);
    transition: --glass 3s;
   width: 100%;
   height: 100%;
    display: flex;
    justify-content: center;
    animation: start-glass 3s var(--cbz) 0s 1;
    
}
/* 装有作业链接的盒子 */
.container{
    /* width: 500px; */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    z-index: 1;
}
.container .card{
    /* 相对定位 */
    position: relative;
    width: 280px;
    height: 400px;
    background-color: rgba(255,255,255,0.1);
    margin: 30px;
    border-radius: 15px;
    /* 阴影 */
    box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
    /* 溢出隐藏 */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-left: 1px solid rgba(255,255,255,0.5);
    /* 背景模糊 */
    backdrop-filter: blur(5px);
}
.container .card .content-box{
    /* display: flex; */
    padding: 20px;
    text-align: center;
    /* 默认下移+隐藏 */
    transform: translateY(100px);
    opacity: 0;
    transition: 0.5s;
}
.container .card:hover .content-box{
    /* 鼠标移入，上移+显示 */
    transform: translateY(0);
    opacity: 1;
}
.container .card .content-box h2{
    position: absolute;
    top: -80px;
    right: 25px;
    font-size: 128px;
    color: rgba(255,255,255,0.05);
}
.container .card .content-box h3{
    font-size: 28px;
    color: #fff;
}
.container .card .content-box p{
    font-size: 16px;
    color: #fff;
    font-weight: 300;
    margin: 10px 0 15px 0;
}
/* 按钮 */
button {
    display: inline-block;
    border-radius: 4px;
    background-color: #3d405b;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 17px;
    padding: 16px;
    width: 130px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
    
   }
   
   button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
   }
   
   button span:after {
    content: '»';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -15px;
    transition: 0.5s;
   }
   
   button:hover span {
    padding-right: 15px;
   }
   
   button:hover span:after {
    opacity: 1;
    right: 0;
   }

/* .container .card .content-box a{
    position: relative;
    display: inline-block;
    padding: 8px 20px;
    margin-top: 15px;
    background-color: #fff;
    color: #000;
    text-decoration: none;
    border-radius: 20px;
    font-weight: 500;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
} */

@keyframes start-glass {
    0% {
        --glass: 200deg;
    }

    100% {
        --glass: 337deg;
    }
}

.content:before {
    content: "";
    position: absolute;
    width: 100vw;
    height: 100%;
    background: linear-gradient(180deg, #000, #080212, #341c5e, #50587e, #0079d9, #39a7ff, #70c6ed 100%);
    background-repeat: no-repeat;
    background-size: 100% 300%;
    background-position: 0% 10%;
    transform: translateZ(-100vmin);
    transition: all 3s var(--cbz) 0s;
    animation: start-bg 3s var(--cbz) 0s 1;
}

.content:after {
    content: "";
    position: absolute;
    width: 100vw;
    height: 200%;
    --s1: radial-gradient(0.1vmin 0.1vmin at 50% 50%, #ffffff, #fff0);
    --s2: radial-gradient(0.2vmin 0.2vmin at 50% 50%, #ffffff, #fff0);
    background-image: var(--s1), var(--s1), var(--s1), var(--s2), var(--s2), var(--s1), var(--s2), var(--s1), var(--s2), var(--s1), var(--s2), var(--s1), var(--s2), var(--s1), var(--s1), var(--s2), var(--s2), var(--s1), var(--s1), var(--s2), var(--s1), var(--s1);
    background-repeat: repeat-x;
    background-size: 26% 25%, 43.33% 33.33%, 50% 80%, 20% 20%, 33.33% 75.33%, 26% 73%, 39.33% 22%, 33.33% 26%, 31% 32%, 14.33% 35.33%, 18.33% 62.33%, 39.33% 86.33%, 29.33% 69%, 12.33% 30.33%, 29.33% 41.33%, 22.33% 46.33%, 35.33% 27.33%, 22.33% 39.33%, 20.33% 44.33%, 33.33% 56.33%;
    filter: drop-shadow(0px 0px 2px #fff) drop-shadow(0px 0px 5px #fff);
    background-position: -8% -10%;
    transform: translateZ(-100vmin);
    transition: all 3s var(--cbz) 0s;
    top: -16vmin;
    animation: start-stars 3s var(--cbz) 0s 1;
}

input#day-night:checked~.content:before {
    background-position: 0% 90%;
    transition: all 3s var(--cbz) 0s;
}

input#day-night:checked~.content:after {
    top: -100%;
    transition: all 3s var(--cbz) 0s;
}

@keyframes start-stars {
    0% {
        top: -100%;
    }

    100% {
        top: 0%;
    }
}

@keyframes start-bg {
    0% {
        background-position: 0% 90%;
    }

    100% {
        background-position: 0% 10%;
    }
}

.moon-sun {
    position: absolute;
    width: 18vmin;
    height: 18vmin;
    bottom: 70vmin;
    margin-left: 90vmin;
    border-radius: 100%;
    background-repeat: no-repeat;
    animation: change-sm 3s var(--cbz) 0s 1;
    animation-fill-mode: forwards;
    background: radial-gradient(circle at 45% 55%, #fff -13%, yellow 35%, orange 90%, #fff0 90%);
    box-shadow: 0 0 6em 3em #ff9800, 0 0 8em 0 #ff9800 inset, 0 0 20px 5px #fdfdfd;
    --moon:
        radial-gradient(circle at 26% 71%, #ffffff 8%, #fff0 12%),
        radial-gradient(circle at 23% 75%, #ccc 0% 1%, #fff0 10%),
        radial-gradient(circle at 14% 42%, #fdfdfd 7%, #fff0 11%),
        radial-gradient(circle at 12% 45%, #ccc 0%, #fff0 7%),
        radial-gradient(circle at 23% 57%, #f9f9f9 2%, #fff0 6%),
        radial-gradient(circle at 22% 58%, #ccc -2%, #fff0 4%),
        radial-gradient(circle at 83% 25%, #fff0 10vmin, #fff calc(10vmin + 1px));
    filter: drop-shadow(0px 1px 6vmin #6493a9) drop-shadow(0px 1px 6vmin #fdfdfd);
}

input#day-night:checked~.content .moon-sun {
    animation: change-ms 3s var(--cbz) 0s 1 reverse;
    animation-fill-mode: forwards;
}


@keyframes change-sm {
    0% {
        bottom: 70vmin;
    }

    45%,
    55% {
        bottom: -35vmin;
    }

    49% {
        background: #ffeb3b;
        filter: drop-shadow(0px 1px 6vmin #ff9800) drop-shadow(0px 1px 6vmin #fdfdfd);
    }

    50% {
        background: var(--moon);
    }

    100% {
        bottom: 70vmin;
        background: var(--moon);
        filter: drop-shadow(0px 1px 6vmin #6493a9) drop-shadow(0px 1px 6vmin #fdfdfd);
        box-shadow: none;
    }
}

@keyframes change-ms {
    0% {
        bottom: 70vmin;
    }

    45%,
    55% {
        bottom: -35vmin;
    }

    49% {
        background: #ffeb3b;
        filter: drop-shadow(0px 1px 6vmin #ff9800) drop-shadow(0px 1px 6vmin #fdfdfd);
    }

    50% {
        background: var(--moon);
    }

    100% {
        bottom: 70vmin;
        background: var(--moon);
        filter: drop-shadow(0px 1px 6vmin #6493a9) drop-shadow(0px 1px 6vmin #fdfdfd);
        box-shadow: none;
    }
}

.cuboid {
    --width: 20;
    --depth: 20;
    --height: 20;
    --hue: 235;
    --sat: 25%;
    height: calc(var(--height) * 1vmin);
    width: calc(var(--width) * 1vmin);
    position: absolute;
    transform: rotateY(-8deg) rotateX(5deg) translateZ(-24vmin);
}

.cuboid .side {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    width: 100%;
    border-radius: 1px;
}

.cuboid .side:nth-of-type(1) {
    --sat: 40%;
    transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin));
    background: hsl(var(--hue), var(--sat), 18%);
}

.cuboid .side:nth-of-type(2) {
    transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin)) rotateY(180deg);
    background: hsl(var(--hue), var(--sat), 35%);
}

.cuboid .side:nth-of-type(3) {
    width: calc(var(--depth) * 1vmin);
    transform: translate(-50%, -50%) rotateY(90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
    background: hsl(var(--hue), var(--sat), 35%);
}

.cuboid .side:nth-of-type(4) {
    width: calc(var(--depth) * 1vmin);
    transform: translate(-50%, -50%) rotateY(-90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
    background: hsl(var(--hue), var(--sat), 40%);
}

.cuboid .side:nth-of-type(5) {
    --sat: 60%;
    height: calc(var(--depth) * 1vmin);
    transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
    background: hsl(var(--hue), var(--sat), 10%);
}

.cuboid .side:nth-of-type(6) {
    --sat: 60%;
    height: calc(var(--depth) * 1vmin);
    transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
    background: hsl(var(--hue), var(--sat), 10%);
}



.air-cooler {
    --height: 3.9;
    --width: 10;
    --depth: 52;
    bottom: 78.5vmin;
    left: 25vmin;
}

.air-cooler+.air-cooler {
    --height: 2.4;
    --width: 5;
    --depth: 20;
    bottom: 78.5vmin;
    left: 42vmin;
    transform: rotateY(-8deg) rotateX(5deg) translateZ(-7vmin);
}

.air-cooler .side:nth-of-type(1) {
    border: 1px solid #0002;
}

.air-cooler .side:nth-of-type(1):before {
    content: "";
    width: calc(100% - 1vmin);
    height: calc(100% - 1vmin);
    position: absolute;
    background: repeating-linear-gradient(180deg, #000, #0a0d29, #434770cc);
    margin: 0.5vmin;
    background-size: 100% 25%;
}







.lights {
    position: absolute;
    width: 52vmin;
    height: 75vmin;
    --foco: radial-gradient(circle at 50% 50%, var(--luz1) 0 0.1vmin, #fff0 calc(0.1vmin + 1px) 100%);
    transform: rotateY(-8deg) rotateX(0deg) translateZ(22vmin) translateX(3vmin);
    background:
        var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco),
        var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco),
        var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco),
        var(--foco), var(--foco),
        var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco),
        var(--foco),
        var(--foco), var(--foco);
    background-position:
        6% 1%, 21% 1%, 11.5% 3.5%, 26% 3.5%, 90% 8%, 17% 6%,
        6% 15%, 11.5% 17%, 53.5% 15%, 58.5% 17%, 72.5% 17%, 67.5% 15%,
        6% 42%, 53.5% 42%, 67.5% 42%, 11.5% 44.25%, 26% 44%, 58.5% 44%, 72.5% 44%, 17% 46.5%, 63.5% 46.25%,
        67.6% 55%, 73% 57%,
        6% 68.5%, 21% 68.5%, 54% 68.5%, 68% 68.5%, 11.5% 71%, 27% 71%, 58.5% 71%, 73% 71%, 18% 73.5%, 64.5% 73.5%,
        16.5% 86%,
        6% 95.5%, 11.5% 98%;
    background-repeat: no-repeat;
    background-size: 1vmin 1vmin;
}

input {
    display: none;
}

label {
    position: absolute;
    right: 3vmin;
    bottom: 3vmin;
    width: 13vmin;
    height: 5vmin;
    background: #0008;
    border-bottom: 1px solid #fff8;
    border-top: 1px solid #000;
    border-radius: 4vmin;
    cursor: pointer;
    z-index: 3;
}

label:before {
    content: "";
    position: absolute;
    width: 12vmin;
    height: 4vmin;
    background: radial-gradient(circle at 50% 48%, #ffbf00 calc(2vmin - 1px), #fff0 2vmin), radial-gradient(circle at 90% 42%, #fff0 2.5vmin, #e6e6e6 calc(2.5vmin + 1px));
    border-radius: 2vmin;
    left: 0.6vmin;
    top: 0.325vmin;
    transition: all 0.4s ease 1s;
    background-repeat: no-repeat;
    background-size: 4.25vmin 4.25vmin, 4.15vmin 4.15vmin;
    background-position: 7.85vmin 0, 0vmin 0vmin;
}

label:after {
    content: "";
    position: absolute;
    width: 6vmin;
    height: 6vmin;
    border-radius: 100%;
    left: -0.95vmin;
    top: -1.1vmin;
    transition: all 1s var(--cbz) 0s;
    border: 0.5vmin solid #fffc;
    box-shadow: 0 0 1vmin 0 #fffc, 0 0 1vmin 0 #fffc inset;
}

input#day-night:checked+label:after {
    border-color: #ffc71e;
    box-shadow: 0 0 1vmin 0.25vmin #ffc71e, 0 0 1vmin 0.25vmin #ffc71e inset;
}

input#day-night:checked+label:after {
    left: 6.95vmin;
    transition: all 1s var(--cbz) 0s;
}

.clouds {
    position: absolute;
    top: 75vh;
    width: 100vw;
    height: 100%;
    background: radial-gradient(ellipse at 10% 23%, #fff1 4vmin, #fff0 15vmin), radial-gradient(ellipse at 0% 15%, #fff1 4vmin, #fff0 8vmin), radial-gradient(circle at 6% 17%, #fff1 4vmin, #fff0 8vmin), radial-gradient(ellipse at 4% 16%, #fff1 1vmin, #fff0 5vmin), radial-gradient(circle at 9% 16%, #fff1 1vmin, #fff0 5vmin), radial-gradient(ellipse at 12% 18%, #fff1 1vmin, #fff0 5vmin), radial-gradient(circle at 17% 19%, #fff1 2vmin, #fff0 6vmin), radial-gradient(ellipse at 13% 13%, #fff1 1vmin, #fff0 6vmin), radial-gradient(ellipse at 22% 20%, #fff1 2vmin, #fff0 8vmin), radial-gradient(circle at 4% 22%, #fff1 0vmin, #fff0 4vmin), radial-gradient(circle at 7% 24%, #fff1 0vmin, #fff0 4vmin), radial-gradient(ellipse at 10% 22%, #fff1 0vmin, #fff0 4vmin), radial-gradient(circle at 30% 19%, #fff2 0vmin, #fff0 13vmin), radial-gradient(circle at 26% 13%, #fff1 0vmin, #fff0 4vmin), radial-gradient(circle at 33% 15%, #fff1 -3vmin, #fff0 7vmin), radial-gradient(circle at 45% 19%, #fff1 4vmin, #fff0 14vmin), radial-gradient(circle at 38% 20%, #fff1 -3vmin, #fff0 7vmin), radial-gradient(circle at 52% 20%, #fff1 0vmin, #fff0 6vmin), radial-gradient(circle at 56% 15%, #fff1 0vmin, #fff0 7vmin), radial-gradient(circle at 58% 18%, #fff1 0vmin, #fff0 7vmin), radial-gradient(circle at 41% 26%, #fff1 2vmin, #fff0 8vmin), radial-gradient(circle at 60% 15%, #fff1 0vmin, #fff0 7vmin), radial-gradient(circle at 63% 12%, #fff1 0vmin, #fff0 7vmin), radial-gradient(circle at 63% 21%, #fff1 4vmin, #fff0 15vmin), radial-gradient(circle at 60% 25%, #fff1 2vmin, #fff0 7vmin), radial-gradient(ellipse at 63% 20%, #fff1 0vmin, #fff0 7vmin), radial-gradient(circle at 71% 25%, #fff1 2vmin, #fff0 9vmin), radial-gradient(ellipse at 84% 22%, #fff1 -1vmin, #fff0 8vmin), radial-gradient(ellipse at 78% 25%, #fff1 -1vmin, #fff0 10vmin), radial-gradient(ellipse at 90% 18%, #fff1 -1vmin, #fff0 10vmin), radial-gradient(ellipse at 93% 17%, #fff1 2vmin, #fff0 11vmin), radial-gradient(circle at 79% 17%, #fff1 -3vmin, #fff0 7vmin), radial-gradient(ellipse at 73% 12%, #fff1 -3vmin, #fff0 6vmin), radial-gradient(ellipse at 68% 15%, #fff1 -2vmin, #fff0 9vmin), radial-gradient(ellipse at 95% 25%, #fff1 -2vmin, #fff0 9vmin), radial-gradient(ellipse at 98% 26%, #fff1 -2vmin, #fff0 9vmin), radial-gradient(ellipse at 90% 23%, #fff1 -2vmin, #fff0 9vmin);
    transform: translateZ(-100vmin);
    transition: all 3s var(--cbz) 0s;
    opacity: 0.6;
}

.clouds span {
    opacity: 0;
}

input#day-night:checked~.content .clouds {
    top: -10vh;
    transition: all 3s var(--cbz) 0s;
    opacity: 1;
    filter: drop-shadow(1vmin -1vmin 1vmin #fff) drop-shadow(-1vmin 1vmin 5vmin #fff) drop-shadow(20vmin 5vmin 5vmin #fff) drop-shadow(-10vmin -1vmin 3vmin #fff);
}

input#day-night:checked~.content {
    transition: --glass 3s;
    --glass: 200deg;
}